<template>
  <view class="container">
    <!-- 订单状态 -->
    <view class="order-status-section">
      <view class="status-icon">
        <uni-icons type="checkmarkempty" size="40" color="#2DCC72"></uni-icons>
      </view>
      <text class="status-text">充电完成</text>
      <text class="order-number">订单号：{{ orderInfo.orderNo }}</text>
    </view>

    <!-- 车辆信息 -->
    <view class="vehicle-info-section">
      <view class="section-title">
        <uni-icons type="car" size="20" color="#333"></uni-icons>
        <text>车辆信息</text>
      </view>
      <view class="info-item">
        <text class="label">车牌号码</text>
        <text class="value">{{ orderInfo.plateNumber }}</text>
      </view>
      <view class="info-item">
        <text class="label">充电桩编号</text>
        <text class="value">{{ orderInfo.pileNumber }}</text>
      </view>
      <view class="info-item">
        <text class="label">充电位置</text>
        <text class="value">{{ orderInfo.location }}</text>
      </view>
    </view>

    <!-- 充电详情 -->
    <view class="charging-details-section">
      <view class="section-title">
        <uni-icons type="battery" size="20" color="#333"></uni-icons>
        <text>充电详情</text>
      </view>
      <view class="detail-grid">
        <view class="detail-item">
          <text class="detail-label">充电时长</text>
          <text class="detail-value">{{ orderInfo.chargingDuration }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">充电电量</text>
          <text class="detail-value">{{ orderInfo.chargingAmount }}度</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">开始时间</text>
          <text class="detail-value">{{ orderInfo.startTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">结束时间</text>
          <text class="detail-value">{{ orderInfo.endTime }}</text>
        </view>
      </view>
    </view>

    <!-- 费用明细 -->
    <view class="cost-details-section">
      <view class="section-title">
        <uni-icons type="wallet" size="20" color="#333"></uni-icons>
        <text>费用明细</text>
      </view>
      <view class="cost-list">
        <view v-for="(item, index) in orderInfo.costDetails" :key="index" class="cost-item">
          <view class="cost-info">
            <text class="cost-period">{{ item.period }}</text>
            <text class="cost-desc">{{ item.amount }}度 × {{ item.price }}元/度</text>
          </view>
          <text class="cost-amount">¥{{ item.total }}</text>
        </view>
      </view>
      <view class="cost-summary">
        <view class="summary-item">
          <text class="summary-label">充电费用</text>
          <text class="summary-value">¥{{ orderInfo.chargingCost }}</text>
        </view>
        <view class="summary-item">
          <text class="summary-label">服务费</text>
          <text class="summary-value">¥{{ orderInfo.serviceFee }}</text>
        </view>
        <view class="summary-item total">
          <text class="summary-label">总计</text>
          <text class="summary-value">¥{{ orderInfo.totalCost }}</text>
        </view>
      </view>
    </view>

    <!-- 支付状态 -->
    <view class="payment-section">
      <view v-if="orderInfo.paymentStatus === 'unpaid'" class="unpaid-section">
        <view class="payment-info">
          <text class="payment-label">待支付金额</text>
          <text class="payment-amount">¥{{ orderInfo.totalCost }}</text>
        </view>
        <button class="pay-btn" @click="payOrder">立即缴费</button>
      </view>
      <view v-else class="paid-section">
        <view class="paid-info">
          <uni-icons type="checkmarkempty" size="20" color="#2DCC72"></uni-icons>
          <text class="paid-text">已支付</text>
        </view>
        <text class="paid-time">支付时间：{{ orderInfo.paymentTime }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="secondary-btn" @click="downloadInvoice">下载发票</button>
      <button class="primary-btn" @click="goBack">返回首页</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 订单信息
const orderInfo = ref({
  orderNo: 'CD202501071234567',
  plateNumber: '皖A12345',
  pileNumber: 'CP001',
  location: '新宇创谷A区充电站',
  chargingDuration: '02:15:30',
  chargingAmount: '35.6',
  startTime: '2025-01-07 14:30:00',
  endTime: '2025-01-07 16:45:30',
  chargingCost: '42.72',
  serviceFee: '2.00',
  totalCost: '44.72',
  paymentStatus: 'unpaid', // unpaid, paid
  paymentTime: '',
  costDetails: [
    {
      period: '平时段 (14:30-16:45)',
      amount: '35.6',
      price: '1.2',
      total: '42.72'
    }
  ]
})

// 页面加载
onLoad((options) => {
  console.log('充电订单页面加载', options)
  if (options.orderId) {
    loadOrderDetails(options.orderId)
  }
})

// 加载订单详情
const loadOrderDetails = (orderId) => {
  // 模拟API调用
  console.log('加载订单详情:', orderId)
  // 这里应该调用实际的API获取订单数据
}

// 支付订单
const payOrder = () => {
  uni.showModal({
    title: '确认支付',
    content: `确认支付 ¥${orderInfo.value.totalCost} 吗？`,
    success: (res) => {
      if (res.confirm) {
        // 模拟支付过程
        uni.showLoading({
          title: '支付中...'
        })
        
        setTimeout(() => {
          uni.hideLoading()
          orderInfo.value.paymentStatus = 'paid'
          orderInfo.value.paymentTime = new Date().toLocaleString()
          
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

// 下载发票
const downloadInvoice = () => {
  uni.showToast({
    title: '发票下载中...',
    icon: 'loading'
  })
  
  // 模拟下载过程
  setTimeout(() => {
    uni.showToast({
      title: '发票已保存到相册',
      icon: 'success'
    })
  }, 2000)
}

// 返回首页
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.order-status-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.status-icon {
  width: 80rpx;
  height: 80rpx;
  background: #f0f9ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20rpx;
}

.status-text {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #2DCC72;
  margin-bottom: 10rpx;
}

.order-number {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.vehicle-info-section,
.charging-details-section,
.cost-details-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-title text {
  margin-left: 10rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 26rpx;
  color: #666;
}

.value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.detail-item {
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.detail-value {
  display: block;
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.cost-list {
  margin-bottom: 20rpx;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.cost-item:last-child {
  border-bottom: none;
}

.cost-info {
  flex: 1;
}

.cost-period {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.cost-desc {
  display: block;
  font-size: 22rpx;
  color: #999;
}

.cost-amount {
  font-size: 26rpx;
  color: #ff6b35;
  font-weight: bold;
}

.cost-summary {
  border-top: 1rpx solid #eee;
  padding-top: 20rpx;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}

.summary-item.total {
  border-top: 1rpx solid #eee;
  padding-top: 15rpx;
  margin-top: 10rpx;
}

.summary-label {
  font-size: 26rpx;
  color: #666;
}

.summary-item.total .summary-label {
  font-weight: bold;
  color: #333;
}

.summary-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.summary-item.total .summary-value {
  font-size: 30rpx;
  color: #ff6b35;
  font-weight: bold;
}

.payment-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.unpaid-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-info {
  flex: 1;
}

.payment-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.payment-amount {
  display: block;
  font-size: 32rpx;
  color: #ff6b35;
  font-weight: bold;
}

.pay-btn {
  width: 200rpx;
  height: 70rpx;
  background: #ff6b35;
  color: white;
  border: none;
  border-radius: 35rpx;
  font-size: 26rpx;
  font-weight: bold;
}

.pay-btn:active {
  background: #e55a2b;
}

.paid-section {
  text-align: center;
}

.paid-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.paid-text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #2DCC72;
  font-weight: bold;
}

.paid-time {
  font-size: 24rpx;
  color: #999;
}

.action-section {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 0;
}

.secondary-btn,
.primary-btn {
  flex: 1;
  height: 88rpx;
  border: none;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.secondary-btn {
  background: #f5f5f5;
  color: #666;
}

.secondary-btn:active {
  background: #e5e5e5;
}

.primary-btn {
  background: #2DCC72;
  color: white;
}

.primary-btn:active {
  background: #25b865;
}
</style>